<template>
	<view class="container">
		<view class="tui-bg-box">
			<image src="../../static/images/login/bg_login.png" class="tui-bg-img"></image>
			<image :src="headImg" class="tui-photo"></image>
			<view class="tui-login-name"></view>
		</view>
		<form @submit="formLogin">
			<view class="tui-login-from">
				<!-- 				<view class="tui-line-cell">
					<tui-icon name="mobile" size="20" color="#5677fc"></tui-icon>
					<input placeholder-class="phcolor" class="tui-input" name="mobile" placeholder="请输入手机号码" maxlength="11" v-model="mobile" type="number" />
				</view>
				<view class="tui-line-cell tui-top28">
					<tui-icon name="pwd" size="20" color="#5677fc"></tui-icon>
					<input placeholder-class="phcolor" class="tui-input" name="smsCode" placeholder="请输入验证码" maxlength="6" />
					<tui-button size="mini" :type="type" shape="circle" :plain="true" :disabled="disabled" @click="btnSend">{{ btnText }}</tui-button>
				</view>
				<button class="btn-primary tui-btn-submit" hover-class="btn-hover" form-type="submit">登录</button> -->
				<!-- 				<view class="tui-protocol" hover-class="opcity" :hover-stay-time="150">
					点击"登录"即表示已同意
					<text class="tui-protocol-red" @tap="protocol">《用户协议》</text>
				</view> -->
			</view>
		</form>
		<!-- 第三方登录 -->
		<!-- #ifdef APP-PLUS || MP-ALIPAY || MP-TOUTIAO || H5-->
		<view @tap="loginByWx('test1')" class="tui-flex" style="margin-top: 140rpx;" hover-class="opcity" :hover-stay-time="150">
			<view class="tui-center tui-col-12">
				<!-- <view class="tui-grid-icon"> -->
				<tui-icon name="wechat" :size="iconSize" color="#19be6b"></tui-icon>
				<!-- </view> -->
				<text class="tui-grid-label">登录app-1</text>
			</view>
		</view>
		<view @tap="loginByWx('test4')" class="tui-flex" style="margin-top: 140rpx;" hover-class="opcity" :hover-stay-time="150">
			<view class="tui-center tui-col-12">
				<!-- <view class="tui-grid-icon"> -->
				<tui-icon name="wechat" :size="iconSize" color="#19be6b"></tui-icon>
				<!-- </view> -->
				<text class="tui-grid-label">登录app-4</text>
			</view>
		</view>
		
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
		<view @tap="loginByWx('test1')" class="tui-flex" open-type="getUserInfo" style="margin-top: 140rpx;" hover-class="opcity" :hover-stay-time="150">
			<view class="tui-center tui-col-12">
				<!-- <view class="tui-grid-icon"> -->
				<tui-icon name="wechat" :size="iconSize" color="#19be6b"></tui-icon>
				<!-- </view> -->
				<text class="tui-grid-label">登录</text>
			</view>
		</view>
		<view @tap="loginByWx('test4')" class="tui-flex" open-type="getUserInfo" style="margin-top: 140rpx;" hover-class="opcity" :hover-stay-time="150">
			<view class="tui-center tui-col-12">
				<!-- <view class="tui-grid-icon"> -->
				<tui-icon name="wechat" :size="iconSize" color="#19be6b"></tui-icon>
				<!-- </view> -->
				<text class="tui-grid-label">登录4</text>
			</view>
		</view>
		<!-- #endif -->

		<view class="tui-protocol" hover-class="opcity" :hover-stay-time="150">
			点击"登录"即表示已同意
			<text class="tui-protocol-red" @tap="protocol">《用户协议》</text>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';

import tuiIcon from '@/components/icon/icon';
import tuiButton from '@/components/button/button';
import defaultHead from '../../static/images/my/mine_def_touxiang_3x.png';
const util = require('../../utils/util.js');
export default {
	components: {
		tuiIcon,
		tuiButton
	},
	data() {
		return {
			disabled: false,
			btnText: '获取验证码',
			mobile: '',
			type: 'primary',
			code: '',
			headImg:defaultHead,
			iconSize:60,
		};
	},
	methods: {
		...mapMutations(['login','setUserInfo']),
		getRandom: function(u) {
			let rnd = '';
			u = u || 6;
			for (var i = 0; i < u; i++) {
				rnd += Math.floor(Math.random() * 10);
			}
			return Number(rnd);
		},
		doLoop: function(seconds) {
			let code = this.getRandom(6);
			this.tui.toast('您本次的验证码是：' + code, 5000);
			seconds = seconds ? seconds : 60;
			this.btnText = seconds + 's后获取';
			this.code = code;
			let countdown = setInterval(() => {
				if (seconds > 0) {
					this.btnText = seconds + 's后获取';
					--seconds;
				} else {
					this.btnText = '获取验证码';
					this.disabled = false;
					this.type = 'primary';
					clearInterval(countdown);
				}
			}, 1000);
		},
		btnSend: function() {
			if (util.isNullOrEmpty(this.mobile)) {
				this.tui.toast('请输入手机号码');
				return;
			} else if (!util.isMobile(this.mobile)) {
				this.tui.toast('请输入正确的手机号码');
				return;
			}
			this.disabled = true;
			this.btnText = '请稍候...';
			this.type = 'gray';

			setTimeout(() => {
				this.doLoop(60);
			}, 500);
		},
		formLogin: function(e) {
			let loginCode = e.detail.value.smsCode;
			let mobile = e.detail.value.mobile;
			if (util.isNullOrEmpty(mobile)) {
				this.tui.toast('请输入手机号码');
				return;
			} else if (!util.isMobile(mobile)) {
				util.toast('请输入正确的手机号码');
				return;
			} else if (util.isNullOrEmpty(loginCode)) {
				this.tui.toast('请输入验证码');
				return;
			} else if (loginCode != this.code) {
				this.tui.toast('验证码不正确');
				return;
			}
			uni.setStorageSync('thorui_mobile', util.formatNum(mobile));
			let state = {
				mobile: util.formatNum(mobile),
				isLogin: true,
				memberId: 0
			};
			this.login(state);
			this.tui.toast('登录成功', 2000, true);
			setTimeout(() => {
				uni.reLaunch({
					url: '../my/my'
				});
			}, 200);
		},
		protocol: function() {
			uni.navigateTo({
				url: 'agreement'
			});
		},
		loginByEnd(openId) {
			this.tui
				.request('/api/login/login', { wxId: openId }, 'POST', false, true)
				.then(res => {
					if (res.code == 0) {
						let token=res.data.token;
						
						this.login(token);
						// 设置userInfo
						/* let state = {
							headPic: this.headImg,
							photos: res.data.member.photos,
							userName: res.data.member.userName,
							sign:res.data.member.sign
						}; */
						let member=res.data.member;
						this.setUserInfo(member);
						
						// 登录成功跳转个人中心页面
						this.tui.toast('登录成功', 2000, true);
						 // 判断用户至少要有一张照片，出生日期，性别字段不能为空,否则跳转到用户信息修改页面
						 if(this.tui.isBlank(member.photos) || this.tui.isBlank(member.birthday) || this.tui.isBlank(member.sex) || member.sex==0){
							 uni.showModal({
							 	title: '提示',
							 	content: '请先完善个人用户信息,至少上传一张照片到相册,性别,生日',
							 	showCancel: false,
							 	confirmColor: "#5677FC",
							 	confirmText: '确定',
							 	success(e) {
							 		uni.reLaunch({
							 			url: '../my/photo-edit'
							 		});
							 	}
							 })
						 }else{
							 setTimeout(() => {
							 	uni.reLaunch({
							 		url: '../my/my'
							 	});
							 }, 300);
						 }
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		// 微信登录
		loginByWx(openId) {
			// let openId = 'test123';
			this.loginByEnd(openId);
			/* uni.login({
				provider: 'weixin',
				scopes:' auth_user',
				success: res => {
					console.log('login success:', res);
					// 更新保存在 store 中的登录状态
					// this.login(openId);
					if (res.errMsg == 'login:ok') {
						let authResult = res.authResult;
						this.getUserInfo(authResult);
					}
				},
				fail: err => {
					console.log('login fail:', err);
				}
			}); */
		},
		getUserInfo(authResult) {
			uni.getUserInfo({
				provider: 'weixin',
				withCredentials: true,
				success: res => {
					console.log('getUserInfo success:', res);
					let openId = res.userInfo.openId;
					let nickName = res.userInfo.nickName;
					let avatarUrl = res.userInfo.avatarUrl;
				},
				fail: err => {
					console.log('getUserInfo fail:', err);
				}
			});
		}
	}
};
</script>

<style>
@import '../../static/style/thorui.css';
page {
	background: #fff;
}

.tui-bg-box {
	width: 100%;
	box-sizing: border-box;
	position: relative;
	padding-top: 44upx;
}

.tui-photo {
	height: 138upx;
	width: 138upx;
	display: block;
	margin: 10upx auto 0 auto;
	border-radius: 50%;
	position: relative;
	z-index: 2;
}

.tui-login-name {
	width: 128upx;
	height: 40upx;
	font-size: 30upx;
	color: #fff;
	margin: 36upx auto 0 auto;
	text-align: center;
	position: relative;
	z-index: 2;
}

.tui-bg-img {
	width: 100%;
	height: 346upx;
	display: block;
	position: absolute;
	top: 0;
}

.tui-login-from {
	width: 100%;
	padding: 128upx 104upx 0 104upx;
	box-sizing: border-box;
}

.tui-input {
	font-size: 32upx;
	flex: 1;
	display: inline-block;
	padding-left: 32upx;
	box-sizing: border-box;
	overflow: hidden;
}

.tui-line-cell {
	padding: 27upx 0;
	display: -webkit-flex;
	display: flex;
	-webkiit-align-items: center;
	align-items: center;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
}

.tui-line-cell::after {
	content: '';
	position: absolute;
	border-bottom: 1upx solid #e0e0e0;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 0;
}

.tui-top28 {
	margin-top: 28upx;
}

.tui-btn-class {
	width: 196upx !important;
	height: 54upx !important;
	border-radius: 27upx !important;
	font-size: 28upx !important;
	padding: 0 !important;
	line-height: 54upx !important;
}

.tui-btn-submit {
	margin-top: 100upx;
}

.tui-protocol {
	color: #333;
	font-size: 24upx;
	text-align: center;
	width: 100%;
	margin-top: 29upx;
}

.tui-protocol-red {
	color: #f54f46;
}
</style>
